<template>
    <div class="scroll-wrapper" ref='scroll'>
        <slot></slot>
    </div>
</template>
<script>
    import BScroll from 'better-scroll';

    export default {
        name: 'scroll',
        props: {
            // 派发滚动事件频率
            probeType: {
                type: Number,
                default: 1,
            },
            click: {
                type: Boolean,
                default: true,
            },
            // 是否持续派发滚动事件
            listenScroll: {
                type: Boolean,
                default: false,
            },
            // 是否需要上拉刷新
            pullup: {
                type: Boolean,
                default: false,
            },
            beforeScroll: {
                type: Boolean,
                default: false,
            },
            // todo
            datalength: {
                type: Number,
                default: 0,
            },
            directionY: {
                type: Boolean,
                default: true,
            },
            refreshDelay: {
                type: Number,
                default: 50,
            },
        },
        methods: {
            refresh() {
                setTimeout(() => {
                    console.log('manual refresh...');
                    this.scroll && this.scroll.refresh();
                }, 100);
            },
            scrollToElement(...args) {
                this.scroll && this.scroll.scrollToElement(...args);
            },
            _initScroll() {
                this.scroll = new BScroll(this.$refs.scroll, {
                    scrollY: this.directionY,
                    scrollX: !this.directionY,
                    probeType: this.probeType,
                    click: this.click,
                });
            },
            _bindEvent() {
                if (this.listenScroll) {
                    this.scroll.on('scroll', (pos) => {
                        this.$emit('scroll', pos);
                    });
                }
                if (this.pullup) {
                    // 滚动事件结束
                    this.scroll.on('scrollEnd', () => {
                        // 结束时判断是否到达底部
                        if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                            // 到达底部,emit一个事件即可
                            this.$emit('scrollToEnd');
                        }
                    });
                }
                if (this.beforeScroll) {
                    this.scroll.on('beforeScrollStart', () => {
                        this.$emit('scrollWillStart');
                    });
                }
                window.addEventListener('resize', () => {
                    this.refresh();
                });
            },
        },
        mounted() {
            this.$nextTick(() => {
                this._initScroll();
                this._bindEvent();
            });
        },
        watch: {
            datalength() {
                setTimeout(() => {
                    console.log('datalength changed...');
                    this.scroll.refresh();
                }, this.refreshDelay);
            },
        },
    };
</script>
<style lang='stylus' scoped>
    .scroll-wrapper
        height 100%
</style>
